Web►Front-End

[Front-End] Drag And Drop隨意拖曳

前言

HTML5提供了Drag And Drop可以拖曳物件，研究了一下如何在區塊內隨意拖曳。

作法

開始拖曳前先取得滑鼠座標和圖片最左上角位置的差值，放開後再將圖片的top和left設置成滑鼠座標補上差值即可。

程式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div id="div" ondrop="toDrop(event)" ondragover="allowDrop(event)">
<img id="img" src="gif.gif" draggable="true" ondragstart="beginDrag(event)" ></img>
</div>
<style>
	#div {width:700px;height:700px;border:1px solid #aaaaaa;}
	#img {position: relative;top:10px;left:10px;}
</style>
<script>
var IE = "ActiveXObject" in window ;
var nowObject = null ;
var offsetX = 0 , offsetY = 0 ;
//取得滑鼠座標
var getMouseSite = function(e){
	var tempX , tempY ;
	if (IE) { 
		tempX = event.clientX + document.body.scrollLeft ;
		tempY = event.clientY + document.body.scrollTop;
	} else {  
		tempX = e.pageX ;
		tempY = e.pageY ;
	}	
	return {x:tempX,y:tempY} ;
}
var beginDrag = function(e){
	e.dataTransfer.setData("text", e.target.id);
	var temp = getMouseSite(e) ;
	//若left值未設則設0
	var left = document.getElementById(e.target.id).style.left || 0 ;
	//若left值已經設定，將px轉換成float
	if ( left !== 0 ){
		left = parseFloat(document.getElementById(e.target.id).style.left);
	}
	var top = document.getElementById(e.target.id).style.top || 0 ;
	if ( top !== 0 ){
		top = parseFloat(document.getElementById(e.target.id).style.top);
	}
	//滑鼠座標和圖片左上角的距離
	offsetX = temp.x - left ; 
	offsetY = temp.y - top ;
}
var toDrop = function(e){
	e.preventDefault();
	var temp = getMouseSite(e) ;
	var data = e.dataTransfer.getData("text");
	document.getElementById(data).style.top = temp.y -  document.getElementById(data).height + ( document.getElementById(data).height - offsetY ) ;
	document.getElementById(data).style.left = temp.x - document.getElementById(data).width + ( document.getElementById(data).width - offsetX );
}
var allowDrop = function(e) {
    e.preventDefault();
}
</script>

Demo

Demo

後記

jQuery UI的Draggable可以達到同樣的效果，但還是有些差異。